sdk/samples/all in on code/Visual Studio 2010/CSSL4FileDragDrop/ReadMe.txt

   1 ========================================================================
   2     SILVERLIGHT APPLICATION : CSSL4FileDragDrop Project Overview
   3 ========================================================================
   4
   5 /////////////////////////////////////////////////////////////////////////////
   6 Use:
   7
   8 Drag&Drop is a newly supported feature in Silverlight4. In this sample, we demonstrate
   9 how to implement visual element's drag&drop function and how to access local files
  10 by using file drag&drop feature.
  11
  12
  13 /////////////////////////////////////////////////////////////////////////////
  14 Demo:
  15
  16 To test this sample:
  17 1. Open CSSL4FileDragDrop solution and rebuild. (Due to an known issue, the drag&drop function are not allowed when running Silverlight app in Admin
  18 mode IE browser. Therefore, user need avoid running this Sample in VisualStudio or IE with
  19 Admin account)
  20 2. Press Ctrl+F5 to open the test page.
  21 3. In opened page, you may find a Silverlight application.
  22         a. Try drag any image files from your windows explorer to Silverlight application
  23         blue region. You may find that the image files will be loaded and displayed in
  24         Silverlight application. (Note that: Silverlight only support .jpg,.png image format)
  25         b. Try drag and drop the image icon.
  26
  27
  28 /////////////////////////////////////////////////////////////////////////////
  29 Prerequisites:
  30
  31 Silverlight 4 Tools for Visual Studio 2010
  32 http://www.silverlight.net/getstarted/
  33
  34 Silverilght 4 runtime
  35 http://www.silverlight.net/getstarted/
  36
  37
  38 /////////////////////////////////////////////////////////////////////////////
  39 Code Logic:
  40
  41 1. How to drag local files to Silverlight application?
  42         First, enable the file drop function on elements by setting UIElement.AllowDrop to true.
  43         Then, handle UIElement.Drop event. To access the draged files, we may use the code below:
  44
  45         private void LayoutRoot_Drop(object sender, DragEventArgs e)
  46     {
  47         if (e.Data != null)
  48         {
  49             // get fileinfos.
  50             var files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];
  51                         foreach (var file in files)
  52             {
  53                                 // access file here.
  54                         }
  55                 }
  56         }
  57
  58 2. How to implement UI element drag and drop function?
  59         First, register UIElement.MouseLeftButtonDown event, in eventhandler, set
  60         "isdrag" flag to true, and store the mouse position relative to the drag
  61         target element, and then capture mouse by UIElement.CaptureMouse() method.
  62
  63             element.MouseLeftButtonDown += (s, e) =>
  64                 {
  65                     isdrag = true;
  66                     element.CaptureMouse();
  67                     relativepos = e.GetPosition(element);
  68                 };
  69
  70         Second, register UIElement.MouseMove event, in eventhandler, check "isdrag"
  71         flag value, if is true, set element's postion to
  72         [mouse current position relative to element's container] - [stored mouse position relative to element]
  73
  74             element.MouseMove += (s, e) =>
  75                 {
  76                     if (isdrag)
  77                     {
  78                         var pos = e.GetPosition(LayoutRoot);
  79                         Canvas.SetLeft(element, pos.X - relativepos.X);
  80                         Canvas.SetTop(element, pos.Y - relativepos.Y);
  81                     }
  82                 };
  83
  84         Third, register UIElement.MouseLeftButtonUp event, in eventhandler, set
  85         "isdrag" to false, and release mouse capture.
  86
  87                         element.MouseLeftButtonUp += (s, e) =>
  88                 {
  89                     element.ReleaseMouseCapture();
  90                     isdrag = false;
  91                 };
  92
  93 /////////////////////////////////////////////////////////////////////////////
  94 References:
  95
  96 UIElement.Drop Event
  97 http://msdn.microsoft.com/en-us/library/system.windows.uielement.drop(VS.95).aspx
  98
  99 /////////////////////////////////////////////////////////////////////////////